<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- rem 布局 -->
    根据视口变化,使网页元素同时自适应改变大小
    1个rem 等于1个html字体尺寸



    <!-- 阿里开源字体自适应js -->
    此js将rem设置为视口的十分之一
    <script src="./js/flexible.js"></script>


    <!-- less语法 -->
    是css的一种拓展语法,不可以直接被html文件直接调用,需要保存生成css文件,然后调用

    <!-- 计算 -->
    width: (68px/37.5rem)
    width: 68px+2rem
    加减乘直接写对应的符号
    除法要加上小括号 也可以 ./
    单位为第一个单位

    <!-- 变量 -->
    先定义变量名
    @color: cyan;
    在要使用的元素调用变量
    background-color: @color;
    需要改的话直接改变量,网页多个调用可以同时改变


    和页面尺寸计算配合为
    @rootfontsize:37.5rem;
    .x { width:(尺寸/37.5) }


    <!-- 嵌套 -->

    .box {
    width: 100px;
    height: 100px;
    background-color: cyan;

    // 后代选择器
    .son {
    width: 20px;
    height: 20px;
    background-color: #666;
    }


    // 伪类选择器 &代替父级类名
    &:hover {
    background-color: rgb(221, 221, 221);
    }
    }

    <!-- 导入 -->
    导入文件
    @import url(./05-less计算.less);
    引号情况下,less文件可以不加后缀
    @import './06-less变量';


    <!-- 导出 禁止导出 -->
    // out:./
    // 导出 第一行out : 导出保存路径


    // 第一行禁止导出
    // out:false

    // 修改所有导出路径
    // 在设置中搜索easyless,在setting.json中编辑添加一段代码 "out":"保存路径"
    // !!注意!! 所有setting.json中的代码都要加双引号

    <!-- 混合写法 -->
    // 混合使用
    .box2 {
    .box ();
    }


    <!-- 混合高级 -->
    @bd1: 1px;
    @bd2: 2px;

    .border (@sdfasd) {
    border-top: @sdfasd solid cyan;
    }

    .box1 {
    .border(@bd1)
    }

    .box2 {
    .border(@bd2)
    }

</body>

</html>